import React, { Component } from 'react'
import './css/App.less';
import { Layout, Menu } from 'antd';
import { Redirect, withRouter, Link, Route, Switch } from "react-router-dom"
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from '@ant-design/icons';

import Home from "./pages/Home"
import Student from "./pages/Student"
import TestPage from "./pages/TestPage"

const { Header, Sider, Content } = Layout;


class App extends Component {
  state = {
    collapsed: false,
  };

  // 控制菜单是否展开
  toggle = () => {

    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    return (
      <div className="boxMain">
        <Layout style={{ minHeight: '100%' }}>
          <Sider trigger={null} collapsible collapsed={this.state.collapsed} style={{ backgroundColor: '#001529' }}>
            <div className="logo" />
            <Menu theme="dark" mode="inline" defaultSelectedKeys={[this.props.location.pathname]}>
              <Menu.Item key="/home" icon={<UserOutlined />} onClick={this.selectMenu}>
                <Link to="/home">nav 1</Link>
              </Menu.Item>
              <Menu.Item key="/student" icon={<VideoCameraOutlined />} onClick={this.selectMenu}>
                <Link to="/student">nav 2</Link>
              </Menu.Item>
              <Menu.Item key="/test" icon={<UploadOutlined />} onClick={this.selectMenu}>
                <Link to="/test">nav 3</Link>
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout className="site-layout">
            <Header className="site-layout-background" style={{ padding: 0, backgroundColor: "#fff" }}>
              {/* 动态渲染组件 */}
              {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                className: 'trigger',
                onClick: this.toggle,
              })}
            </Header>

            {/* 内容区 */}
            <Content
              className="site-layout-background"
              style={{
                margin: '24px 16px',
                padding: 24,
                minHeight: 280,
                backgroundColor: "#fff"
              }}
            >
              <Switch>
                {/* 首页 */}
                <Route path="/home" component={Home} />
                {/* 练习页面 */}
                <Route path="/student" component={Student} />
                {/* 凑数页面 */}
                <Route path="/test" component={TestPage} />
                {/* 默认跳转到首页 */}
                <Redirect to="/home" />
              </Switch>
            </Content>
          </Layout>
        </Layout>
      </div>
    )
  }
}

export default withRouter(App)
